<template>
  <view class="page">
    <Header :title="'思维导图'"></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-思维导图-' + chapterName"> </Breadcrumb>
        <view class="content">
          <view class="title"> {{ chapterName }} </view>
          <view class="tabs">
            <view class="tabs_item" @click="goToLianLianKan()">
              <text>连连看</text>
            </view>
            <view class="tabs_item" @click="goToXiaoXiaoLe()">
              <text>消消乐</text>
            </view>
            <view class="tabs_item" @click="goToWordRead()">
              <text>单词领读</text>
            </view>
            <view class="tabs_item" @click="goToWordPass()">
              <text>单词闯关</text>
            </view>
          </view>
          <view class="box">
            <view class="box_item">
              <view class="video">
                <video
                  id="chapterVideo"
                  :src="chapterVideo"
                  controls
                  object-fit="fill"
                  @play="play()"
                  @pause="pause()"
                  @ended="ended()"
                ></video>
              </view>
            </view>
            <view class="box_item">
              <swiper
                class="swiper"
                :autoplay="autoplay"
                :indicator-dots="indicatorDots"
                indicator-active-color="#ffc71c"
                indicator-color="rgba(255, 199, 28, .3)"
              >
                <swiper-item
                  v-for="(item, index) in watermarkList"
                  :key="index"
                >
                  <view class="image">
                    <image :src="item" mode="widthFix"></image>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { findChapterByUserId } from "@/api/mindMap";
export default {
  components: {},
  beforeRouteLeave(to, from, next) {
    if (this.isPlay) {
      this.videoContext.pause();
    }
    next();
  },
  data() {
    return {
      routeList: [
        {
          name: "个人评测",
          url: "",
        },
        {
          name: "思维导图",
          url: "",
        },
      ],
      chapterId: "",
      periodName: "",
      chapterName: "",
      chapterPhotosList: [],
      chapterVideo: "",
      videoContext: null,
      isPlay: false,
      isUnLock: -1,
      watermarkList: [],
      autoplay: false,
      indicatorDots: true,
    };
  },
  onLoad(option) {
    this.chapterId = option.chapterId;
    this.init();
  },
  onReady() {
    this.videoContext = uni.createVideoContext("chapterVideo");
  },
  methods: {
    init() {
      let params = {
        id: this.chapterId,
      };
      findChapterByUserId(params).then((res) => {
        this.periodName = res.data.periodName;
        this.chapterName = res.data.chapterName;
        this.isUnLock = res.data.unLock;
        this.chapterVideo = res.data.chapterVideo;
        this.chapterPhotosList = res.data.chapterPhotos.split(",");
        this.getWatermark();
      });
    },
    goToLianLianKan() {
      uni.navigateTo({
        url: `/pages/mindMap/mindMapLianLianKan?chapterId=${this.chapterId}`,
      });
    },
    goToXiaoXiaoLe() {
      uni.navigateTo({
        url: `/pages/mindMap/mindMapXiaoXiaoLe?chapterId=${this.chapterId}`,
      });
    },
    goToWordRead() {
      uni.navigateTo({
        url: `/pages/mindMap/mindMapRead?chapterId=${this.chapterId}`,
      });
    },
    goToWordPass() {
      // if (this.isUnLock !== 1) {
      //   uni.showModal({
      //     title: "温馨提示",
      //     content: "请先完成单词领读！",
      //     showCancel: false,
      //   });
      //   return;
      // }
      uni.navigateTo({
        url: `/pages/mindMap/mindMapPass?chapterId=${this.chapterId}`,
      });
    },
    getWatermark() {
      this.chapterPhotosList.forEach((element) => {
        this.watermarkList.push(element);
      });
    },
    play() {
      this.isPlay = true;
    },
    pause() {
      this.isPlay = false;
    },
    ended() {
      this.isPlay = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./mindMapDetail";
</style>
